<template>
  <div class="le-matter">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="he-link-text">
      <el-breadcrumb-item class="he-link">
        <he-link href="goods/index"> 商品管理 </he-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>导出历史</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="le-card">
      <el-table :data="list" v-loading="loading">
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <div class="he-text">
              {{ scope.row.conditions.time_start | getTime }} ~
              <br />
              {{ scope.row.conditions.time_end | getTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品价格">
          <template slot-scope="scope">
            <div class="he-text">
              {{ scope.row.conditions.price_start | getPrice }} ~ {{ scope.row.conditions.price_end | getPrice }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品分类">
          <template slot-scope="scope">
            <div class="he-text">
              {{ scope.row.conditions.show_group ? scope.row.conditions.show_group : '全部' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_time" label="导出时间">
          <template slot-scope="scope">
            <div class="he-text">{{ scope.row.created_time | getTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="操作">
          <template slot-scope="scope">
            <div class="le-button flex align-center">
              <el-button
                @click="export2Excel(scope.row.goods_data.tHeader, scope.row.goods_data.list, scope.row.created_time)"
                type="text"
                class=""
                >下载</el-button
              >
              <span class="le-line"></span>
              <popconfirm
                width="360px"
                @confirm="deleteItem({ id: scope.row.id, index: scope.$index })"
                title="确定删除这条导出历史记录？"
              >
                <el-button class="" type="text">删除</el-button>
              </popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="he-pagination el-row--flex is-align-middle is-justify-end">
        <el-pagination
          :current-page="page.current"
          background
          layout="prev, pager, next, jumper"
          @current-change="currentChange"
          :page-count="page.count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import popconfirm from '@/components/popconfirm.vue';
export default {
  components: {
    popconfirm
  },
  name: 'goodsExportHistory',
  data() {
    return {
      del_id: null,
      list: [],
      page: {
        current: 1,
        count: 0,
        size: 10
      },
      loading: false
    };
  },
  async mounted() {
    this.getList(this.page);
  },
  methods: {
    currentChange: function (e) {
      this.page.current = e;
      this.getList(this.page);
    },
    getList: function (page) {
      this.loading = true;
      this.$heshop
        .export('get', { include: 'goods' })
        .page(page.current, page.size)
        .then(res => {
          let { data, headers } = res;
          this.list = data;
          this.page = {
            current: +headers['x-pagination-current-page'],
            count: +headers['x-pagination-page-count'],
            size: +headers['x-pagination-per-page']
          };
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err.data.message);
        });
    },
    deleteItem(e) {
      let _this = this;
      this.$heshop
        .export('delete', e.id, { include: 'goods' })
        .then(() => {
          this.$delete(_this.list, e.index);
          if (_this.page.current < _this.page.count) {
            _this.getList(_this.page);
          }
          this.$message.success('删除成功');
        })
        .catch(err => {
          console.error(err);
        });
    },
    export2Excel(tHeader, list, create_time) {
      require.ensure([], () => {
        this.$h.Export2Excel.export_json_to_excel({
          header: tHeader,
          data: list,
          filename: '商品报表(' + this.$moment(new Date(create_time * 1000)).format('YYYYMMDDHHmmss') + ')'
        });
      });
    }
  },
  filters: {
    getTime: function (time) {
      if (time) {
        time = new Date(time * 1000);
        let y = time.getFullYear();
        let m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        return `${y}-${m}-${d} ${h}:${mm}:${s}`;
      } else {
        return '--';
      }
    },
    getPrice: function (price) {
      if (price) {
        return '￥' + price;
      } else {
        return '--';
      }
    }
  }
};
</script>
<style lang="less" scoped="true">
.he-link-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

.he-pagination {
  padding-top: 17px;
}

.el-button--text.he-class__button-new.el-button--mini {
  font-size: 14px;
  font-weight: 500;
  color: #623ceb;
  line-height: 22px;
  padding: 0 14px;
  margin: 0;
}

.he-text {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  opacity: 0.85;
  margin: 5px 0;
}

.le-card {
  margin-top: 24px;
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
}
.le-button {
  .el-button {
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
  }
  .le-line {
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: #623ceb;
    margin: 0 10px;
  }
}
</style>
